<template>
  <div class="pageSearch">
    <BBTable :userList="dataList" v-bind="tableConfig">
      <!-- <template #status="scope">
        <el-button :type="scope.row.enable ? 'primary' : 'danger'" plain>
          {{ scope.row.enable ? "启用" : "禁用" }}
        </el-button>
      </template> -->
      <template #header>
        <h2>{{ title }}</h2>
        <div class="action" v-if="pageName !== 'menu'">
          <el-button v-if="isDelete" type="danger" plain>
            <el-icon><CircleClose /> </el-icon> 批量删除</el-button
          >
          <el-button v-if="isCreate" @click="handleAddClick">
            <el-icon><Plus /></el-icon>{{ AddDataName }}</el-button
          >
        </div>
      </template>
      <template #handle="scope">
        <el-button
          size="small"
          type="primary"
          v-if="isUpdate"
          @click="handleEditClick(scope.row)"
        >
          编辑</el-button
        >
        <el-button
          size="small"
          type="danger"
          v-if="isDelete"
          @click="handleDeleteClick(scope.row)"
        >
          删除</el-button
        >
      </template>

      <template #footer>
        <el-pagination
          v-model:currentPage="pageInfo.currentPage"
          v-model:page-size="pageInfo.pageSize"
          :page-sizes="[10, 20, 30, 40]"
          small="small"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </template>

      <!-- 格式化创建时间和更新时间 -->
      <template #createAt="scope">
        <span> {{ $filters.formatData(scope.row.createAt) }}</span>
      </template>
      <template #updateAt="scope">
        <span> {{ $filters.formatData(scope.row.createAt) }}</span>
      </template>

      <!-- 动态插槽 -->
      <!-- 将剩余的插槽动态的绑定 -->
      <template
        v-for="item in otherPropsSlots"
        :key="item.prop"
        #[item.slotName]="scope"
      >
        <template v-if="item.slotName">
          <slot :name="item.slotName" :row="scope.row"> </slot>
        </template>
      </template>
    </BBTable>
  </div>
</template>

<script lang='ts'>
import { defineComponent, ref } from "@vue/runtime-core";
import BBTable from "@/base-ui/table/index";
import { useStore } from "@/store/index";
import { userPremission } from "@/hooks/usePremission";
import { computed } from "vue";

import { ElMessageBox, ElMessage } from "element-plus";
export default defineComponent({
  emits: ["handleAddFn", "handleEditFn"],
  props: {
    tableConfig: {
      type: Object,
      required: true,
    },
    //传入当前页面的名称用于页面请求数据
    pageName: {
      type: String,
      required: true,
    },
    title: {
      type: String,
      default: "数据展示",
    },
    AddDataName: {
      type: String,
      dafault: "新增数据",
    },
    // //是否需要分页
    // isPagination: {
    //   type: Boolean,
    //   default: true,
    // },
  },
  name: "PageTable",
  components: {
    BBTable,
  },
  setup(props, { emit }) {
    const store = useStore();
    // const title = ref(props.title)
    // const AddDataName = ref(props.AddDataName)
    //验证当前用户是否有相应的权限
    const isDelete = userPremission(props.pageName, "delete");
    const isUpdate = userPremission(props.pageName, "update");
    const isQuery = userPremission(props.pageName, "query");
    const isCreate = userPremission(props.pageName, "create");

    //双向绑定 pageInfo
    const pageInfo = ref({ currentPage: 1, pageSize: 10 });

    //发起网络请求
    const getData = (queryInfo: any = {}) => {
      if (!isQuery) return;
      store.dispatch("system/getPageListAcion", {
        pageName: props.pageName,
        queryInfo: {
          offset: (pageInfo.value.currentPage - 1) * pageInfo.value.pageSize,
          size: pageInfo.value.pageSize,
          ...queryInfo,
        },
      });
    };
    getData();
    //分页事件
    const handleSizeChange = (value: number) => {
      // console.log('触发了handleSizeChange事件');
      // console.log(currentPage);
      pageInfo.value.pageSize = value;
      //  console.log(value);
      getData();
    };
    const handleCurrentChange = (value: number) => {
      // console.log('出发了handleCurrentChange事件');
      // console.log(pageInfo.value.currentPage);
      // console.log(value);
      pageInfo.value.currentPage = value;
      getData();
    };

    //获取 用户数据信息的总量
    const totalCount = computed(() =>
      store.getters[`system/pageListCount`](props.pageName)
    );

    // 获取用户信息列表
    //使用 store 里面的getters ,getters 调用的是 system 里面的模块，里面的pageListData 方法，返回值为函数,将 需要的 页面名称传递过去
    const dataList = computed(() =>
      store.getters[`system/pageListData`](props.pageName)
    );

    // 获取其他的动态插槽
    const otherPropsSlots = props.tableConfig?.tablesList.filter(
      (item: any) => {
        if (item.slotName === "createAt") return false;
        if (item.slotName === "updateAt") return false;
        if (item.slotName === "handle") return false;
        return true;
      }
    );
    // console.log(otherPropsSlots);

    //删除按钮的点击事件
    const handleDeleteClick = (item) => {
      ElMessageBox.confirm("确定删除该条数据嘛?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          //调用 vuex 里面定义的删除函数
          store.dispatch("system/deletePageListAction", {
            pageName: props.pageName,
            id: item.id,
          });
          ElMessage.success('删除成功')
        })
        .catch(() => {
          ElMessage.info('取消删除');
        });
      // console.log(item);
    };

    //新增用户
    const handleAddClick = () => {
      emit("handleAddFn");
    };
    //编辑信息
    const handleEditClick = (item: any) => {
      emit("handleEditFn", item);
    };

    return {
      dataList,
      getData,
      totalCount,
      handleSizeChange,
      handleCurrentChange,
      pageInfo,
      otherPropsSlots,
      isDelete,
      isQuery,
      isCreate,
      isUpdate,
      handleDeleteClick,
      handleAddClick,
      handleEditClick,
    };
  },
});
</script>

<style>
</style>